import React, { useEffect, useState } from "react";
import { Tag, Ellipsis, InfiniteScroll } from "antd-mobile";
import "./index.scss";
import { courseGet } from "../../api/course";
import { CourseConditionType, CourseType } from "../../type/course";
import { Link } from "react-router-dom";
import CustomSkeleton from "./CustomSkeleton";
import CourseList from "./CourseList";

export default function Course({ catelv1, catelv2 }: CourseConditionType) {
  const [list, setList] = useState<CourseType[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  let [page, setPage] = useState<number>(1);
  useEffect(() => {
    console.log("course的useEffect执行了");
    (async () => {
      let res = await courseGet(catelv1, catelv2);
      setList(res.data.results);
      console.log("异步请求执行了", page);
    })();
    return () => {
      console.log("useEffect内部回调");
      //在这个useEffect下次执行前执行，处理useEffect副作用的某些逻辑问题
    };
  }, [catelv1, catelv2]);
  const loadMore = async () => {
    console.log("course的loadMore执行了", page);
    setPage(++page);
    let res = await courseGet(catelv1, catelv2, page);
    let { results } = res.data;
    setList([...list, ...results]);
    if (results.length < 10) {
      setHasMore(false);
    }
  };
  return (
    <div className="course-cont">
      {list.length ? (
        <CourseList list={list} idKey="objectId" />
      ) : (
        <CustomSkeleton />
      )}

      {list.length >= 10 ? (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />
      ) : (
        ""
      )}
    </div>
  );
}
